<template>
  <div class="box1">
    <van-nav-bar
      @click-left="onClickLeft"
      left-arrow
      fixed
      style="background: gold"
      title="四六级词汇"
    >
    </van-nav-bar>
    <van-sticky>
      <form class="search" action="/">
        <van-search
          v-model="value"
          show-action
          background="gold"
          placeholder="请通过中/英文搜索"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
      <van-row class="row">
        <van-col span="6">英文</van-col>
        <van-col span="6">中文翻译</van-col>
        <van-col span="6">语法读音</van-col>
        <van-col span="6">级数</van-col>
      </van-row>
    </van-sticky>
    <!-- 页面展示内容 -->
    <van-row style="text-align: center" v-for="(item, i) in list" :key="i">
      <van-col class="col" span="6">{{ item.english }}</van-col>
      <van-col class="col" span="6">{{ item.chinese }}</van-col>
      <van-col class="col" span="6">{{ item.sent }}</van-col>
      <van-col class="col" span="6">{{ item.level }}</van-col>
    </van-row>
    <!-- 底部分页 -->
    <van-pagination v-model="currentPage" :page-count="length" mode="simple" />
    <div class="tiaozhuan">
      <span>跳转到第</span>
      <input type="text" v-model="currentPage1" />
      <span>页</span>
      <button @click="btn">点我</button>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      value: "",
      currentPage: 1,
      currentPage1: "",
      list: [],
      length: 1,
      count: 50,
    };
  },
  watch: {
    // 监听页面上页数的变化
    currentPage(newval) {
      window.scrollTo(0, 0);
      // console.log(newval)
      this.getWords(newval);
    },
  },
  methods: {
    // 返回上一页
    onClickLeft() {
      this.$router.push("/");
    },
    // 取消搜索
    allsearch(){
      this.axios.get("/kc/words").then((res) => {
        // console.log(res)
        let arr = res.data.result;
        let begin = (this.currentPage - 1) * this.count;
        let end = begin + this.count;
        this.list = arr.slice(begin, end);
        // console.log(this.list)
        let length = Math.ceil(arr.length / this.count);
        this.length = length;
        // console.log(length);
      });
    },
    // 搜索
    onSearch() {
      let val = this.value;
      // console.log(val);
      if (val=="") {
        return;
      } else {
        // 模糊查询单词
        this.axios
          .get("/kc/getwords", { params: { words: val } })
          .then((res) => {
            // console.log(res.data.result);
            this.list = res.data.result
            this.length = 1
          });
      }
    },
    onCancel() {
      Toast("已经清除搜索内容");
      this.allsearch();
    },
    // 获取分页的单词数据
    getWords() {
      this.allsearch();
    },
    // 点击跳转到对应的分页
    btn() {
      if (this.currentPage1 == "") {
        this.currentPage1 = this.currentPage;
      }
      if (this.currentPage1 > this.length) {
        this.currentPage1 = this.length;
      }
      this.currentPage = Number(this.currentPage1);
      this.currentPage1 = "";
      // setTimeout(()=>{
      // },1500)
    },
  },
  mounted() {
    // 显示单词
    this.getWords();
  },
};
</script>
<style scoped>
@import url("../../assets/css/SLwords.css");
</style>